<template>
	<view class= "container">
		<view v-if="!hasLogin || empty===true" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view v-if="hasLogin" class="empty-tips">
				空空如也
				<navigator class="navigator" v-if="hasLogin" url="../index/index" open-type="switchTab">随便逛逛></navigator>
			</view>
			<view v-else class="empty-tips">
				空空如也
				<view class="navigator" @click="navToLogin">去登陆></view>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="myCollections-list">
				<block v-for="(item, index) in myCollectionsList" :key="item.id">
					<view
						class="myCollections-item" 
						:class="{'b-b': index!==myCollectionsList.length-1}"
					>
						<view class="image-wrapper">
							<image :src="item.image" 
								:class="[item.loaded]"
								mode="aspectFill" 
								lazy-load 
								@load="onImageLoad('myCollectionsList', index)" 
								@error="onImageError('myCollectionsList', index)"
								@click="navTo('/pages/product/product')"
							></image>
							
						</view>
						<view class="item-right">
							<text class="clamp title" @click="navTo('/pages/product/product')">{{item.title}}</text>
							<text class="attr" @click="navTo('/pages/product/product')">{{item.attr_val}}</text>
							<text class="price" @click="navTo('/pages/product/product')">¥{{item.price}}</text>
							
						</view>
						<text class="del-btn yticon icon-fork" @click="deleteMyCollectionsItem(index)"></text>
					</view>
				</block>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import uniNumberBox from '@/components/uni-number-box.vue'
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				empty: false, //空白页现实  true|false
				myCollectionsList: [],
			};
		},
		onLoad(){
			this.loadData();
		},
		watch:{
			//显示空白页
			myCollectionsList(e){
				let empty = e.length === 0 ? true: false;
				if(this.empty !== empty){
					this.empty = empty;
				}
			}
		},
		computed:{
			...mapState(['hasLogin'])
		},
		methods: {
			//请求数据
			async loadData(){
				let list = await this.$api.json('myCollectionsList'); 
				let myCollectionsList = list.map(item=>{
					item.checked = true;
					return item;
				});
				this.myCollectionsList = myCollectionsList;
				
			},
			//监听image加载完成
			onImageLoad(key, index) {
				this.$set(this[key][index], 'loaded', 'loaded');
			},
			//监听image加载失败
			onImageError(key, index) {
				this[key][index].image = '/static/默认商品.png';
			},
			navToLogin(){
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			 
			
			//删除
			deleteMyCollectionsItem(index){
				let list = this.myCollectionsList;
				let row = list[index];
				let id = row.id;
	
				this.myCollectionsList.splice(index, 1);
				uni.hideLoading();
			},
			
			
			
			navTo(url){
				uni.navigateTo({  
					url
				})  
			}, 
		}
	}
</script>

<style lang="scss">
	.container{
		padding-bottom: 134upx;
		/* 空白页 */
		.empty{
			position:fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100vh;
			padding-bottom:100upx;
			display:flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
			background: #fff;
			image{
				width: 240upx;
				height: 160upx;
				margin-bottom:30upx;
			}
			.empty-tips{
				display:flex;
				font-size: $font-sm+2upx;
				color: $font-color-disabled;
				.navigator{
					color: $uni-color-primary;
					margin-left: 16upx;
				}
			}
		}
	}
	/* 我的收藏列表项 */
	.myCollections-item{
		display:flex;
		position:relative;
		padding:30upx 40upx;
		.image-wrapper{
			width: 230upx;
			height: 230upx;
			flex-shrink: 0;
			position:relative;
			image{
				border-radius:8upx;
			}
		}
		
		.item-right{
			display:flex;
			flex-direction: column;
			flex: 1;
			overflow: hidden;
			position:relative;
			padding-left: 30upx;
			.title,.price{
				font-size:$font-base + 2upx;
				color: $font-color-dark;
				height: 40upx;
				line-height: 40upx;
			}
			.attr{
				font-size: $font-sm + 2upx;
				color: $font-color-light;
				height: 50upx;
				line-height: 50upx;
			}
			.price{
				height: 50upx;
				line-height:50upx;
			}
		}
		.del-btn{
			padding:4upx 10upx;
			font-size:34upx; 
			height: 50upx;
			color: $font-color-light;
		}
	}
	
</style>
